<template>
    <div class="mainBox">
        <div class="title">开始预习</div>

        <div class="collapse">
            <el-collapse
                accordion
                @change="collapseClick"
                v-model="activeNames"
            >
                <el-collapse-item
                    :name="index"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <template slot="title">
                        <div class="layui-colla-title">
                            <div class="layui-colla-title-left">
                                {{ item.section_name }}
                            </div>
                            <!-- <div class="layui-colla-title-right">
                                共{{ secondSectionList.length }}个试题
                            </div> -->
                        </div>
                    </template>
                    <template>
                        <div
                            class="layui-show-item"
                            v-for="(item1, index1) in item.subList"
                            :key="index1"
                        >
                            <div class="layui-show-item-left">
                                <div class="layui-show-item-left-text">
                                    {{ item1.section_name }}
                                </div>
                                <template v-if="item1.finish_state == 1">
                                    <div
                                        class="layui-show-item-left-button"
                                        @click="
                                            toPreview(
                                                item.section_name,
                                                item1.section_name,
                                                item1.zid,
                                                item.zid
                                            )
                                        "
                                    >
                                        开始预习
                                    </div>
                                </template>
                                <template v-else-if="item1.finish_state == 2">
                                    <div class="layui-show-item-left-button2">
                                        已预习
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="layui-show-item-left-button1">
                                        继续预习
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
import { getSestion } from "@/api/test/work/index";
export default {
    components: {},
    props: {},
    data() {
        return {
            list: [],
            user_log_id: "",
            num: 0,
            loading: null,
            activeNames: null
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        this.user_log_id = this.$route.query.user_log_id;
        this.getChapter();
    },
    methods: {
        getChapter() {
            var data = {
                user_log_id: this.user_log_id
            };
            getSestion(data).then(res => {
                if (res.code == 200) {
                    var list = res.data;
                    this.list = list;
                    for (var i = 0; i < this.list.length; i++) {
                        var da = {
                            user_log_id: this.user_log_id,
                            f_zid: this.list[i].zid
                        };
                        getSestion(da).then(res => {
                            if (res.code == 200) {
                                var lists = res.data;
                                for (var j = 0; j < lists.length; j++) {
                                    if (lists[j].finish_state == 1) {
                                        this.num++;
                                    }
                                }
                            }
                        });
                    }
                } else {
                    this.list = [];
                }
                console.log("this.list", this.list);
            });
        },
        open(zid, index) {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.5)"
            });
            var data = {
                user_log_id: this.user_log_id,
                f_zid: zid
            };
            getSestion(data).then(res => {
                if (res.code == 200) {
                    var list = res.data;
                    this.list[index].subList = list;
                } else {
                    this.list[index].subList = [];
                }
                this.$forceUpdate();
                this.loading.close();
            });
        },
        collapseClick(index) {
            if (index !== "") {
                this.open(this.list[index].zid, index);
            }
        },
        // 前往预习
        toPreview(title, name, zid, fid) {
            this.$router.push({
                path: "/work/preview/index",
                query: {
                    title: title,
                    name: name,
                    zid: zid,
                    fid: fid,
                    num: this.num,
                    user_log_id: this.user_log_id
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
    }
}
.collapse {
    flex-grow: 1;
    margin-top: 30px;
    .layui-colla-title {
        display: flex;
        justify-content: space-between;
        color: #2d3440;
        font-weight: 500;
        width: 100%;
        padding: 0px 15px 0px 20px;
    }
    .layui-colla-title-left {
        font-size: 16px;
    }
    .layui-show {
        background: #fff;
        padding: 0px;
    }
    .loadmore {
        padding: 18px 0;
        margin: 0 auto;
        width: 96%;
        text-align: center;
        font-size: 16px;
    }
    .layui-show-item {
        padding: 18px 0px;
        width: 96%;
        margin: 0 auto;
        box-sizing: border-box;
        border-bottom: 1px solid #dadfe6;
        display: flex;
        justify-content: space-between;
        &:last-child {
            border: none;
        }
        .layui-show-item-left {
            display: flex;
            align-items: center;
            width: 98%;
            margin-left: 10px;
            justify-content: space-between;
            .layui-show-item-left-button {
                padding: 3px 8px;
                border-radius: 15px;
                color: white;
                background: #018854;
                margin-left: 20px;
                cursor: pointer;
            }
            .layui-show-item-left-button1 {
                padding: 3px 8px;
                border-radius: 15px;
                color: white;
                background: #ff7171;
                margin-left: 20px;
                cursor: pointer;
            }
            .layui-show-item-left-button2 {
                padding: 3px 15px;
                border-radius: 15px;
                color: #303133;
                background: #f2f2f2;
                margin-left: 20px;
                cursor: pointer;
            }
        }
        .layui-show-item-right {
            display: flex;
            align-items: center;
        }
    }
}
</style>
